<template>
	<el-dialog title="选择规格" v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
		:close-on-press-escape="false" width="600px">
		<div>
			<div class="table-wrap">
				<el-table size="small" :data="specsList" border style="width: 100%" highlight-current-row
					v-loading="loading" @selection-change="tableCurrentChange">
					<el-table-column label="产品/规格">
						<template #default="{row}">
							{{row.spec_name}}
						</template>
					</el-table-column>
					<el-table-column v-if="islist" type="selection" :selectable="selectableFunc"
						width="44"></el-table-column>
					<el-table-column width="80" label="单选" v-if="!islist">
						<template #default="{ row }">
							<el-button size="small" v-if="row.noChoose" @click="SingleFunc(row)">选择</el-button>
							<el-button size="small" v-else disabled>已选</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<template #footer>
			<el-button size="small" @click="dialogVisible=false">取 消</el-button>
			<el-button size="small" type="primary" @click="addClerk" v-if="islist">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import ProductApi from '@/api/product.js';
	export default {
		data() {
			return {
				/*是否加载完成*/
				loading: true,
				//规格列表
				specsList: [],
				/*多选的*/
				multipleSelection: [],
				/*左边长度*/
				formLabelWidth: '120px',
				/*是否显示*/
				dialogVisible: false,
				/*结果类别*/
				type: 'error',
				/*传出去的参数*/
				params: null
			};
		},
		props: ['isspecs', 'productId', 'excludeIds', 'islist'],
		watch: {
			isspecs: function(n, o) {
				if (n != o) {
					if (n) {
						this.specsList = [];
						this.dialogVisible = n;
						this.type = 'error';
						this.params = null;
						this.getData();
					}
				}
			}
		},
		created() {

		},
		methods: {
			/*单选*/
			SingleFunc(row) {
				this.multipleSelection = [row];
				this.addClerk();
			},
			/*是否可以勾选*/
			selectableFunc(e) {
				if (typeof e.noChoose !== 'boolean') {
					return true;
				}
				return e.noChoose;
			},

			/*获取规格列表*/
			getData() {
				let self = this;
				ProductApi.chooseSpec({
						product_id: self.productId
					}, true)
					.then(res => {
						if (res.code == 1) {
							self.loading = false;
							/*判断是否需要去重*/
							if (self.excludeIds && typeof(self.excludeIds) != 'undefined' && self.excludeIds.length >
								0) {
								res.data.specList.forEach(item => {
									console.log(item.product_sku_id);
									if (self.excludeIds.indexOf(item.product_sku_id) > -1) {
										item.noChoose = false;
									} else {
										item.noChoose = true;
									}
								});
							} else {
								res.data.specList.forEach(item => {
									item.noChoose = true;
								});
							}
							self.specsList = res.data.specList;
						}
					})
					.catch(error => {});
			},

			//点击确定
			addClerk() {
				let self = this;
				let params = null;
				let type = 'success';
				if (self.multipleSelection.length < 1) {
					ElMessage({
						message: '请至少选择一件产品商品！',
						type: 'error'
					});
					return;
				}
				if (self.islist && typeof(self.islist) != 'undefined') {
					params = self.multipleSelection;
				} else {
					params = self.multipleSelection[0];
				}
				self.params = params;
				self.type = 'success';
				self.dialogVisible = false;
			},

			/*关闭弹窗*/
			dialogFormVisible() {
				this.$emit('close', {
					type: this.type,
					open: false,
					params: this.params
				});
			},

			/*监听复选按钮选中事件*/
			tableCurrentChange(val) {
				this.multipleSelection = val;
			}
		}
	};
</script>

<style>
</style>